<script setup>
import { ref, computed } from 'vue'
import { addSong, getSongDetail, updateSong } from '@/api/song'
import MusicUpload from '@/components/MusicUpload.vue'
import { getAllSingerList } from '@/api/singer'

const drawer = ref(false)
const formLabelWidth = '80px'
// 表单数据
const form = ref({
  singerId: '',
  name: "0",
  introduction: '',
  pic: '',
  lyric: '',
  url: '',
})
const mode = ref('add')  // 模式，默认为添加
// 根据 mode 计算 title
const title = computed(() => {
  return mode.value === 'add' ? '添加歌曲' : '编辑歌曲'
})

// 歌手映射表 {id: name}
const singersMap = ref({});
// 定一个供父组件调用的打开抽屉的方法
const openDrawer = async (songId) => {
  drawer.value = true
  // 异步请求
  const { data } = await getAllSingerList();
  // allSingerListdata 是一个数组，格式为 [{ id: 1, name: '歌手A' }, { id: 2, name: '歌手B' }]
  // 将其转换为映射表
  const singersMapTemp = {}
  data.forEach(singer => {
    singersMapTemp[singer.id] = singer.name
  })
  // 将映射表赋值给 singersMap
  singersMap.value = singersMapTemp

  if (songId) {
    mode.value = 'edit'
    // 异步请求获取数据
    const { data } = await getSongDetail(songId)
    form.value = data
    form.value.singerId = "" + data.singerId || Object.keys(singersMap.value)[0] || ''  // 如果没有歌手ID，默认选择第一个歌手
  } else {
    mode.value = 'add'
    form.value = {
      singerId: Object.keys(singersMap.value)[0] || '',  // 默认选择第一个歌手
      name: '',
      introduction: '',
      pic: '',
      lyric: '',
      url: '',
    }
  }
}
//  暴露方法
defineExpose({
  openDrawer
})
const uploadPic = (url) => {  
  form.value.pic = url
}
const uploadMusic = (url) => {  
  form.value.url = url
}
const onSubmit =async () => {
  let res
  if (mode.value === 'add') {
    res = await addSong(form.value)
  } else if (mode.value === 'edit') {
    res = await updateSong(form.value)  
  } else {
    ElMessage.error('未知操作模式')
    return
  }
  console.log(res);  
  ElMessage.success(res.msg)
  drawer.value = false
  emit('song-list')  // 通知父组件刷新歌曲列表
}

const emit = defineEmits(['song-list'])
</script>

<template>
  <el-drawer v-model="drawer" :title="title" direction="rtl" size="40%">
    <div class="demo-drawer__content">
      <el-form :model="form">
        <!-- <el-form-item label="歌手id" :label-width="formLabelWidth">
          <el-input v-model="form.singerId" autocomplete="off" />
        </el-form-item> -->
        <el-form-item label="歌手" :label-width="formLabelWidth">
          <el-select v-model="form.singerId" placeholder="请选择歌手" style="width: 240px">
            <el-option
              v-for="([key, value], index) in Object.entries(singersMap)"
              :key="key"
              :label="value"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="简介" :label-width="formLabelWidth">
          <el-input v-model="form.introduction" autocomplete="off" />
        </el-form-item>
        <el-form-item label="歌词" :label-width="formLabelWidth">
          <el-input v-model="form.lyric" type="textarea" />
        </el-form-item>
        <el-form-item label="图像" :label-width="formLabelWidth">
          <image-upload @upload-success="uploadPic" type="song" :imgUrl="form.pic"></image-upload>
        </el-form-item>
        <el-form-item label="音乐" :label-width="formLabelWidth">
          <MusicUpload @upload-success="uploadMusic"></MusicUpload>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth">
          <el-button type="primary" @click="onSubmit">{{ title }}</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>

<style scoped>

</style>